<!--
 * @Description: 特材原料管理
 * @Author: wangwangwang
 * @Date: 2020-09-21 14:09:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-29 15:01:22
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">特材原料名称</span>
                <el-input v-model="tableParam.productName" style="width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">原料型号</span>
                <el-input v-model="tableParam.type" style="width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">原料罐</span>
                <el-input v-model="tableParam.tank" style="width: 200px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0;" @click="tankListArrlist=[],addFromDate('添加')">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
                添加
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='RIYONG'))!==-1" size="small" class="bottom_three" @click="Update(1)">
                <i class="icon iconfont iconicon_button_startuse" style="font-size: 12px;"></i>
                启用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JINYONG'))!==-1" size="small" class="bottom_four" @click="Update(0)">
                <i class="icon iconfont iconicon_button_disable1" style="font-size: 12px;"></i>
                禁用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='YUANLIAOGUANWEIHU'))!==-1" size="small" class="bottom_all_two" style="margin-left: 12px" @click="maintenanceLookFun()">原料罐维护</el-button>
            </div>
          </div>
          <div v-loading="tableLoading" class="card_info">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column align="center" type="selection"></el-table-column>
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :min-width="item.width" :fixed=" (item.label =='操作'||item.label =='二维码')?'right':false">
                  <template slot-scope="scope">
                    <span v-if="scope.row.enable == 0 && item.label == '状态'" style="color:#969799;">禁用</span>
                    <span v-if="scope.row.enable == 1 && item.label == '状态'" style="color:#00A754;">启用</span>
                    <span v-if="item.label == '操作'">
                      <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="bottom_one" size="mini" @click="updateFromDate(scope.row, '修改'),tankListArrShow(scope.row)">
                        <i class="icon iconfont iconicon_button_modification" style="font-size: 12px;"></i>
                        修改
                      </el-button>
                      <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='MEIRIPANDIAN'))!==-1" class="bottom_one" size="mini" @click="look3Fun(scope.row)">
                        每日盘点
                      </el-button>
                      <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='PDJL'))!==-1" class="bottom_one" size="mini" @click="look4Fun(scope.row)">
                        盘点历史
                      </el-button>
                    </span>
                    <span v-if="item.label !== '操作' && item.label !== '状态'">{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="580px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">{{ addDialogTitle }}</span>
      <div class="dialoginfo">
        <el-form ref="reffromDate" style="padding: 20px;" :inline="true" :model="fromDate" label-width="110px">
          <el-form-item prop="companyId" :rules="[{required: true,message: '请选择所属单位',trigger: 'change',}]">
            <span slot="label" style="color:  #FF0000 ;">所属单位</span>
            <el-select ref="companyId" v-model="fromDate.companyId" placeholder="请选择" @change="fromDate.tankListArr=[],$nextTick(()=>{fromDate.company = $refs.companyId.selectedLabel}),tankqueryPageFunList(fromDate.companyId)">
              <el-option v-for="item in companyIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="productName" :rules="[{required: true,message: '请输入特材原料名称',trigger: 'change',}]">
            <span slot="label" style="color:  #FF0000 ;">特材原料名称</span>
            <el-input v-model="fromDate.productName" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="type" :rules="[{required: true,message: '请输入原料型号',trigger: 'change',}]">
            <span slot="label" style="color:  #FF0000 ;">原料型号</span>
            <el-input v-model="fromDate.type" placeholder="请输入" clearable>
            </el-input>
          </el-form-item>
          <el-form-item prop="tankListArr" :rules="[{required: true,message: '请选择原料罐',trigger: 'change',}]">
            <span slot="label" style="color:  #FF0000 ;">原料罐</span>
            <el-select ref="tankListArr" v-model="fromDate.tankListArr" multiple placeholder="请选择">
              <el-option v-for="item in tankListArrlist" :key="item.id" :label="item.tankName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="warningInventory" :rules="[{required: true,message: '请输入安全库存',trigger: 'change',}]">
            <span slot="label" style="color:  #FF0000 ;">预警库存量</span>
            <el-input v-model="fromDate.warningInventory" type="Number" placeholder="请输入" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="状态" prop="enable">
            <el-radio-group v-model="fromDate.enable">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="addDialog=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="pagessubmitFromDate()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="look2Type" width="800px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">特材罐维护</span>
      <div class="dialoginfo">
        <div style="padding-bottom: 10px;">
          <el-button size="mini" class="bottom_all" style="margin-left: 0;position: relative;" @click="addItem('添加')">
            <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
            添加
          </el-button>
          <span style="position: absolute;right: 40px;">
            原料罐名称：
            <el-input v-model="table2Param.tankName" size="mini" style="width: 130px;margin-right:10px;"></el-input>
            <el-button size="mini" class="bottom_all but1" @click="tankqueryPageFun()">搜索</el-button>
          </span>
        </div>
        <el-table ref="look2List" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="maintenanceList" tooltip-effect="dark" highlight-current-row>
          <el-table-column prop="company" label="公司" width="auto" align="center"></el-table-column>
          <el-table-column prop="code" label="原料罐编号" width="auto" align="center"></el-table-column>
          <el-table-column prop="tankName" label="原料罐名称" width="auto" align="center"></el-table-column>
          <el-table-column prop="inventory" label="库存" width="auto" align="center"></el-table-column>
          <el-table-column prop="" label="操作" width="220" align="center">
            <template slot-scope="scope">
              <el-button class="bottom_one" size="mini" @click="addItem('修改',scope.row)">
                <i class="icon iconfont iconicon_button_modification" style="font-size: 12px;"></i>
                编辑
              </el-button>
              <el-button size="mini" class="bottom_two" @click="tankdeleteFun(scope.row.id)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="card_bottom">
          <div class="card_bottom_left">
            <div class="top_page_totle">总共{{ table2Param.total }}条</div>
            <el-pagination :current-page.sync="table2Param.page" :page-size="table2Param.pageSize" layout="prev, pager, next, jumper" :total="table2Param.total" @current-change="tankqueryPageFun()"></el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look2Type=false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="look1Type" width="580px" :close-on-click-modal="false">
      <span slot=" title" class="dialog-title">{{look1Form.tableName}}</span>
      <div class="dialoginfo">
        <el-form ref="look1Form" style="padding: 20px;" :inline="true" :model="look1Form" label-width="110px">
          <el-form-item prop="companyId" :rules="[{required: true,message: '请选择所属单位',trigger: 'change',}]">
            <span slot="label" style="color:  #FF0000 ;">所属单位</span>
            <el-select ref="company" v-model="look1Form.companyId" placeholder="请选择" @change="$nextTick(()=>{look1Form.company = $refs.company.selectedLabel})">
              <el-option v-for="item in companyIdList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="tankName" :rules="[{required: true,message: '请输入原料罐名称',trigger: 'blur',}]">
            <span slot="label" style="color:#FF0000 ;">原料罐名称</span>
            <el-input v-model="look1Form.tankName" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="inventory" :rules="[{required: true,message: '请输入库存',trigger: 'blur',}]">
            <span slot="label" style="color:#FF0000 ;">库存量</span>
            <el-input v-model="look1Form.inventory" type="Number" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look1Type=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="tanksaveOrUpdateFun('look1Form')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="look3Type" width="580px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">每日盘点</span>
      <div class="dialoginfo">
        <el-form ref="fromDate3" style="padding: 20px;" :inline="true" :model="fromDate3" label-width="110px">
          <el-form-item prop="id" :rules="[{required: true,message: '请选择原料罐',trigger: 'change',}]">
            <span slot="label" style="color:  #FF0000 ;">原料罐</span>
            <el-select ref="companyId" v-model="fromDate3.id" placeholder="请选择" @change="$nextTick(()=>{fromDate3.tankName = $refs.companyId.selectedLabel})">
              <el-option v-for="item in tankNameList" :key="item.id" :label="item.tankName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="inventory" :rules="[{required: true,message: '请输入盘点库存',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000 ;">盘点库存</span>
            <el-input v-model="fromDate3.inventory" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="checkTime" :rules="[{required: true,message: '请输入盘点时间',trigger: 'change',}]">
            <span slot="label" style="color:#FF0000 ;">盘点时间</span>
            <el-date-picker v-model="fromDate3.checkTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look3Type=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="tansaveOrUpdateFun('fromDate3')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="look4Type" width="580px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">盘点历史</span>
      <div class="dialoginfo">
        <el-table ref="look2List" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="list4" tooltip-effect="dark" highlight-current-row>
          <el-table-column prop="name" label="特材原料名称" width="auto" align="center"></el-table-column>
          <el-table-column prop="type" label="原料型号" width="auto" align="center"></el-table-column>
          <el-table-column prop="tankName" label="原料罐" width="auto" align="center"></el-table-column>
          <el-table-column prop="num" label="盘点库存" width="auto" align="center"></el-table-column>
          <el-table-column prop="createUserName" label="盘点人" width="auto" align="center"></el-table-column>
          <el-table-column prop="checkTime" label="盘点时间" width="auto" align="center"></el-table-column>
        </el-table>
        <div class="card_bottom">
          <div class="card_bottom_left">
            <div class="top_page_totle">总共{{ table4Param.total }}条</div>
            <el-pagination :current-page.sync="table4Param.page" :page-size="table4Param.pageSize" layout="prev, pager, next, jumper" :total="table4Param.total" @current-change="recordsqueryPageFun()"></el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="look4Type=false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
  batchUpdateOrDelete,
  saveOrUpdate,
  tanksaveOrUpdate,
  tankqueryPage,
  tankdelete,
  tansaveOrUpdate,
  recordsqueryPage,
} from "@/api/smart/specialmaterial/product.js";
import { permissionsCompanyList } from "@/api/common.js";
import { getUserInfo } from "@/utils/auth.js";
export default {
  mixins: [mixin],
  data() {
    return {
      UserInfo: '',
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      batchUpdateOrDelete: batchUpdateOrDelete,
      saveOrUpdate: saveOrUpdate,
      /*表格数据*/
      table: [
        {
          label: "特材原料编码",
          width: "120",
          prop: "code",
          status: true,
        },
        {
          label: "所属单位",
          width: "130",
          prop: "company",
          status: true,
        },
        {
          label: "特材原料名称",
          width: "130",
          prop: "productName",
          status: true,
        },
        {
          label: "原料型号",
          width: "auto",
          prop: "type",
          status: true,
        },
        {
          label: "原料罐",
          prop: "tank",
          status: true,
        },
        {
          label: "库存量",
          width: "auto",
          prop: "inventory",
          status: true,
        },
        {
          label: "预警库存量",
          width: "auto",
          prop: "warningInventory",
          status: true,
        },
        {
          label: "状态",
          width: "100",
          prop: "",
          status: true,
        },
        {
          label: "更新时间",
          width: "135",
          prop: "updateTime",
          status: true,
        },
        {
          label: "操作",
          width: "300",
          prop: "",
          status: true,
        },
      ],
      fromDate: {
        tankListArr: [],
        companyId: '',
        productName: '',
        type: '',
        tankList: [],
        enable: 1,
        dataType: 1,
      },
      companyIdList: [],
      tankListArrlist: [],
      look1Type: false,
      look1Form: {
        company: '',
        companyId: '',
        tableName: '',
        tankType: 1,
        tankName: '',
        inventory: '',
        id: ''
      },
      look2Type: false,
      table2Param: {
        tankName: '',
        tankType: 1,
        page: 1,
        pageSize: 10,
        total: 0
      },
      maintenanceList: [],
      look3Type: false,
      fromDate3: {
        id: '',
        inventory: '',
        checkTime: '',
        operation: 1,
      },
      tankNameList: [],
      look4Type: false,
      list4: [],
      table4Param: {
        dataId: '',
        page: 1,
        pageSize: 10,
        total: 0
      },
    };
  },
  async created() {
    this.UserInfo = await getUserInfo();
    this.companyIdList = await permissionsCompanyList()
    this.tableParam = { ...this.tableParam, code: "", supplierType: "", dataType: 1 };
    this.gettableData();
  },
  /*
   *copy(data)深拷贝数据,返回拷贝完的数据
   *gettableData获取列表数据
   *load下载
   *SortNum保持序列号
   * UpdateOrDelete禁用，启用，删除
   * submitFromDate保存更新数据
   */
  methods: {
    /**盘点历史 */
    look4Fun(e) {
      console.log(e);
      this.look4Type = true
      this.table4Param.dataId = e.id
      this.recordsqueryPageFun()
    },
    /**盘点记录 */
    recordsqueryPageFun() {
      recordsqueryPage(this.table4Param).then((res) => {
        this.list4 = res.data.data
        this.table4Param.total = res.data.totalRows
      })
    },
    /**每日盘点 */
    tansaveOrUpdateFun(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          tansaveOrUpdate(this.fromDate3).then((res) => {
            if (res.code == 1001) {
              this.look3Type = false
              this.gettableData();
            }
          })
        } else {
          return false;
        }
      });
    },
    /**点开每日盘点 */
    look3Fun(e) {
      this.look3Type = true
      this.$nextTick(async () => {
        this.$refs.fromDate3.resetFields()
        this.fromDate3.productId = e.id
        this.fromDate3.productType = e.type
        this.fromDate3.productName = e.productName
        this.tankNameList = []
        let arr = e.tankId.split(',')
        console.log(arr);
        await this.tankqueryPageFunList(e.companyId, e.id)
        arr.forEach((v) => {
          let obj = this.tankListArrlist.find((res) => v == res.id)
          console.log(obj);
          if (obj) {
            this.tankNameList.push(obj)
          }
        })
      })
    },
    /**点修改 */
    tankListArrShow(e) {
      this.fromDate.productId = e.id
      this.fromDate.companyIdCopy = e.companyId
      this.tankqueryPageFunList(e.companyId, e.id)
      this.fromDate.tankListArr = []
      e.tankId.split(',').forEach((v) => {
        this.fromDate.tankListArr.push(v)
      })
    },
    /**特材罐维护-删除 */
    tankdeleteFun(id) {
      this.$confirm('此操作将执行删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tankdelete({ id: id }).then((res) => {
          if (res.code == 1001) {
            this.tankqueryPageFun()
          }
        })
      }).catch(() => { });
    },
    /**特材罐维护-添加 */
    tanksaveOrUpdateFun(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          tanksaveOrUpdate(this.look1Form).then((res) => {
            if (res.code == 1001) {
              this.look1Type = false
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.tankqueryPageFun()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    /**特材罐维护查询 */
    tankqueryPageFun() {
      tankqueryPage(this.table2Param).then((res) => {
        this.maintenanceList = res.data.data
        this.table2Param.total = res.data.totalRows
        this.gettableData();
      })
    },
    /**添加或修改 */
    addItem(name, e) {
      this.look1Type = true
      this.$nextTick(() => {
        this.$refs.look1Form.resetFields();
        this.look1Form.tableName = name
        this.look1Form.id = ''
        if (e) {
          this.look1Form.tankName = e.tankName
          this.look1Form.inventory = e.inventory
          this.look1Form.id = e.id
          this.look1Form.companyId = e.companyId
        }
      })
    },
    /**原料罐维护 */
    maintenanceLookFun() {
      this.look2Type = true
      this.tankqueryPageFun()
    },
    /**添加提交 */
    pagessubmitFromDate() {
      let _this = this;
      _this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          this.fromDate.tankList = []
          this.fromDate.tankListArr.forEach((v) => {
            let item = this.tankListArrlist.find((e) => e.id == v)
            this.fromDate.tankList.push({ id: item.id, tankName: item.tankName, inventory: item.inventory })
          })
          _this.submitFromDate();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init() {
      /*重置数据*/
      this.tableParam.productName = "";
      this.tableParam.type = "";
      this.tableParam.tank = "";
      this.gettableData();
    },
    /**查询原料罐 */
    async tankqueryPageFunList(companyId, productId) {
      if (!productId && this.fromDate.companyIdCopy == companyId) {
        productId = this.fromDate.productId
      }
      await tankqueryPage({ tankType: 1, companyId: companyId, binding: 0, productId: productId }).then((res) => {
        this.tankListArrlist = res.data.data;
      });
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
};
</script>
<style lang="scss" scoped>
.dialoginfo {
  .el-input,
  .el-select {
    width: 280px;
  }
}
.table_link {
  display: inline-block;
  width: 110px;
  margin: 0 10px 0 0;
  border: $bg_color 1px solid;
  color: $bg_color;
  border-radius: 3px;
  font-size: 14px;
  height: 30px;
  background: #ffffff;
  a {
    display: inline-block;
    line-height: 29.31px;
    color: $bg_color;
    text-decoration: none;
    font-size: 14px;
  }
}
</style>
